<template>
  <div>
    <!--头部操作按钮-->
    <el-row :gutter="10" class="mb8">
      <el-form size="mini" :inline="true" :model="user">
        <el-form-item label="用户ID">
          <el-input v-model="user.userId" @keyup.enter.native="queryByUserId" placeholder="用户ID" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryByUserId">查询</el-button>
          <el-button type="danger" @click="judgeDelete" :disabled="multipleSelection.length <= 0">批量修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row v-show="this.show" v-html="'<h3>'+'用户'+this.t_userId+'的评论'+'</h3>'">
    </el-row>

    <!--数据列表-->
    <el-table
      size="mini"
      :data="tableData"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="commentId"
        header-align="center"
        align="center"
        width="120"
        label="评论Id">
      </el-table-column>
      <el-table-column
        prop="hotelId"
        header-align="center"
        align="center"
        label="酒店Id">
      </el-table-column>
      <el-table-column
        prop="userId"
        header-align="center"
        align="center"
        label="用户Id">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="类型">
        <template slot-scope="scope">
          <el-tag size="small" type="success" v-if="scope.row.type===1">商品订单</el-tag>
          <el-tag size="small" type="warning" v-else>酒店订单</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        header-align="center"
        align="center"
        width="400"
        :show-overflow-tooltip="true"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        :formatter="dateFormat"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="isDeleted"
        header-align="center"
        align="center"
        label="逻辑删除">
        <template slot-scope="scope">
          <el-tag size="small" type="success" v-if="scope.row.isDeleted===1">正常</el-tag>
          <el-tag size="small" type="danger" v-else>屏蔽</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="open(scope.row)" size="small">查看</el-button>
          <el-button type="text" @click="judgeDelete(scope.row)" size="small">
            <p size="small" type="success" v-if="scope.row.isDeleted===1">屏蔽</p>
            <p size="small" type="danger" v-else>恢复</p>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页样式-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        @current-change="currentChangeHandle"
        :current-page=this.currentPage
        :page-size=this.pageSize
        :total=this.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用户ID查询用户
      user: {
        userId: ''
      },
      //暂时存放userId
      t_userId: null,
      show: false,
      //所有用户
      tableData: null,
      //当前页面
      currentPage: 1,
      //每页显示
      pageSize: 5,
      //总数
      total: 0,
      //多选获得对象数组
      multipleSelection: [],
      //获得对象数组的id
      multipleId: [],
    }
  },
  created() {
    this.queryAll();
  },
  methods: {
    /**
     *查询所有评论
     */
    queryAll() {
      this.$http({
        url: this.$http.adornUrl('/consumer/comment/queryAll'),
        method: 'get',
        params: this.$http.adornParams({
          "currentPage": this.currentPage,
          "pageSize": this.pageSize
          // "userId": this.user.userId
        })
      }).then(({data}) => {
        console.log(data)
          this.total = data.total
          this.tableData = data.list
          this.show = false
          this.t_userId = this.user.userId
      })
    },
    /**
     * 根据id查询用户*/
    queryByUserId() {
      if (this.user.userId === "") {
        alert("请输入用户ID")
        this.show = false
        this.queryAll()
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/consumer/comment/queryByUserId'),
        method: 'get',
        params: this.$http.adornParams({
          "currentPage": this.currentPage,
          "pageSize": this.pageSize,
          "userId": this.user.userId
        })
      }).then(({data}) => {
        //判断data是否为空
        /*if (data === undefined || data.length <= 0 || data.list[0] == null) {*/
        if (data.list[0] == null) {
          alert("不存在用户" + "“" + this.user.userId + "”的评论")
          this.user.userId = ""
          this.t_userId = ""
          /*清空tableData*/
          this.tableData = null
          this.show = false
          this.queryAll()
        } else {
          this.total = data.total
          this.tableData = data.list
          this.show = true
          this.t_userId = this.user.userId
          // this.t_userId = data.list[0].userName
        }
      })
    },

    /**
     * 判断删除*/
    judgeDelete(row) {
      this.$confirm('是否确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功!',
        });
        if (this.multipleId.length <= 0) {
          this.updateIsDeleted(row)
        } else {
          this.multipleUpdate()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },

    /**
     * 删除单条用户评论*/
    updateIsDeleted(row) {
      this.$http({
        url: this.$http.adornUrl('/consumer/comment/update'),
        method: 'get',
        params: this.$http.adornParams({
          'commentId': row.commentId
        })
      }).then(({data}) => {
        if(this.t_userId === ""){
          this.queryAll()
        }else {
          this.queryByUserId()
        }

      })
    },

    /**
     * 批量删除*/
    multipleUpdate() {
      console.log(this.multipleId)
      this.$http({
        url: this.$http.adornUrl('/consumer/comment/multipleUpdate'),
        method: 'post',
        data: this.$http.adornData(this.multipleId, false)
      }).then(({data}) => {
        console.log(data)
        if(this.t_userId === ""){
          this.queryAll()
        }else{
          this.queryByUserId()
        }
      })
    },
    /**
     * 查看评论详情*/
    open(row) {
      this.$alert(row.content, '评论id：' + row.commentId, {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ok`
          });
        }
      });
    },

    /**
     * 修改页数*/
    currentChangeHandle(val) {
      this.currentPage = val
      if(this.t_userId === "") {
        this.queryAll()
      }else{
        this.queryByUserId(this.t_userId)
      }
    },

    /**
     * 获得多选的值*/
    handleSelectionChange(val) {
      this.multipleSelection = val;
      /*每次更新多选都重新为空*/
      this.multipleId = []
      // console.log(this.multipleSelection)
      /*获取选中用户id*/
      for (let i = 0; i < this.multipleSelection.length; i++) {
        // console.log(this.multipleSelection[i])
        this.multipleId.push(this.multipleSelection[i].commentId)
      }
      // console.log(this.multipleId)
    },

    /**
     * 时间格式化的方法*/
    dateFormat(row, col) {
      const daters = row[col.property]
      if (daters != null) {
        let date = new Date(daters);
        let year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        // 拼接
        return year + "-" + month + "-" + day;
      }
    },
  }
}
</script>
<style lang="css">
.el-tooltip__popper{
  display: none }
</style>
